---
id: use-responsive-prop
title: useResponsiveProp
---

`useResponsiveProp` returns a function that takes the `responsive props` format as an argument. Useful if you want to resolve responsive props in your components.

### TypeScript

```typescript
const useResponsiveProp: <T>(value: ResponsiveProp<T> | null | undefined) => T | undefined;
```

### ReScript

```res
type resolveResponsiveProp<'a> = option<responsiveProp<'a>> => option<'a>

let useResponsiveProp: unit => resolveResponsiveProp<'a>
```

### Basic usage

```jsx live showCode
const ResponsivePlaceholder = props => {
  const resolveResponsiveProp = useResponsiveProp()
  const size = resolveResponsiveProp(props.size)

  return (
    <Placeholder width={size} height={size} />
  )
}

const App = () => {
  return (
    <StacksProvider>
      <ResponsivePlaceholder size={[100, 200, 300]} />
    </StacksProvider>
  )
}

render(<App />)
```
